import React from 'react'
import { useSearchParams, useLocation } from 'react-router-dom'

export default function Detail() {
  const [search, setSearch] = useSearchParams();
  const id = search.get("id");
  const title = search.get("title");
  const content = search.get("content");

  const x = useLocation()
  console.log(x)    // {pathname: '/home/message/detail', search: '?id=008&title=%E5%93%88%E5%93%88&content=%E5%98%BB%E5%98%BB', hash: '', state: null, key: 'ubr6sd63'}

  return (
    <div>
      {/* setSearch(XXXX) 会更新参数，同时改变地址栏的参数 */}
      <p onClick={() => setSearch("id=008&title=哈哈&content=嘻嘻")}>点我更新一下收到的search参数</p>
      <p>消息编号：{id}</p>
      <p>消息标题：{title}</p>
      <p>消息内容：{content}</p>
    </div>
  )
}
